$(function(){
    // 初始化图片的裁剪区域
    // 1.1 获取裁剪区域的 DOM 元素
    var $image = $('#image')
    // 1.2 配置选项
    const options = {
        // 纵横比
        aspectRatio: 1,
        // 指定预览区域
        preview: '.img-preview'
    }

    // 1.3 创建裁剪区域
    $image.cropper(options)

    // 单击'上传',弹出文件选择对话框
    $('#btnChooseImage').click(function(){
        // 触发文件选择框点击事件
        $('#file').click()
    })
    // 给文件选择框绑定change事件
    $('#file').on('change',function(){
        // 获取用户选中的文件，文件选择框元素对象.files
        var fileList=this.files
        // 判断用户是否选择了文件
        if(fileList.length<=0){
            return layui.layer.msg('请选择文件',{icon:5})
        }
        var file=fileList[0]
        console.log(file);
        // 更换裁剪的图片
        var newImgURL = URL.createObjectURL(file)
        $image
        .cropper('destroy')      // 销毁旧的裁剪区域
        .attr('src', newImgURL)  // 重新设置图片路径
        .cropper(options)        // 重新初始化裁剪区域
    })
    // 单击'确定'按钮，裁剪图片并上传到服务器
    $('#btnUpload').click(function(){
        var dataURL = $image
            .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                width: 100,
                height: 100
            })
            .toDataURL('image/png')       // 将 Canvas 画布上的内容，转化为 base64 格式的字符串
        $.ajax({
            method:'post',
            url:'/my/update/avatar',
            data:{
                avatar:dataURL
            },
            success:function(res){
                // console.log(res);
                if(res.status!==0){
                    return layui.layer.msg(res.message,{icon:5})
                }
                layui.layer.msg(res.message,{icon:6})
                // 更新index.html中的头像
                window.parent.getUserInfo()
            }
        })
    })
})